<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>
    <script src="..\js\component.js"></script>
</head>
<body>
<div id="c">
    {{todo}}
    <hr>
    <p style="font-size: large">
        component.props必须提供值。this.propName是入参。
        this.$data.xxx是component.data。
    </p>
    <test-component1 v-bind:todo1="todo"></test-component1>

    <p style="font-size: large">for处理component.data</p>
    <test-component4
            v-for="subject in subjects"
            v-bind:key="subject.id"
            v-bind:todo="subject.title"></test-component4>

    <p style="font-size: large">for处理component.data,单根,样式来自component，所以各自变化</p>
    <test-component5
            v-for="subject in subjects"
            v-bind:key="subject.id"
            v-bind:todo="subject"></test-component5>

    <p style="font-size: large">for处理component.data,单根,样式来自component，所以统一变化;</p>
    <p style="font-size: large">父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
    unit不能被获取
    </p>
    <test-component6
            v-for="subject in subjects"
            v-bind:key="subject.id"
            v-bind:todo="subject"
            v-bind:fs="fss"
            v-on:enl="enlM">
        <span>提示：{{fss}} {{unit}}</span> 模板内的html触发emit，由模板配置parent的响应方法enlM
    </test-component6>
    <button v-on:click="enlarge">size now : {{fss}}</button>

    <p style="font-size: large">component is</p>
    <buttons_div v-for="b in buttons" v-bind:key="b" v-bind:bn="b" v-on:changebn="handleChangeBn"></buttons_div>
    <component v-bind:is="calComponentName"></component>

    <p style="font-size: large">component $attrs</p>
    <p-com v-bind:msg="fontsize" v-bind:c="componentName" additional="xxxxxxxxxxxxxxxx"></p-com>
</div>
<hr>
<test-component></test-component>

</body>
<script type="application/javascript">
    Vue.component(
        'test-component1',
        {
            template:'<p @click="print">learn {{todo}}</p>',
            props:['todo1'],
            data:function (){
                return {
                    todo:'vue'
                };
            },
            methods:{
                print:function(){
                    console.log(this.$data.todo);
                    console.log(this.todo1);
                }
            }
        }
    );

    Vue.component(
        'test-component4',
        {
            template:'<p>learn {{todo}}</p>',
            props:['todo']
        }
    );

    Vue.component(
        'test-component5',
        {
            template:`
              <p :style="{fontSize: fontSize+unit}" v-on:click="enlarge">learn {{todo.title}}</p>

            `,
            props:['todo'],
            data:function(){
                return {
                    fontSize:10,
                    unit:'px'
                };
            },
            methods:{
                enlarge : function(){
                    this.fontSize += 1;
                }
            }
        }
    );

    Vue.component(
        'test-component6',
        {
            template:`
              <p v-bind:style="{fontSize: fs+unit}" v-on:click="$emit('enl' , 5)"> <slot></slot> learn {{todo.title}}</p>
            `,
            props:['todo' , 'fs'],
            data:function(){
                return {
                    unit:'px'
                };
            }
        }
    );

    var app = new Vue({
        el:'#c',
        data:{
            todo:'hello vue',
            fontsize:50,
            fss:20,
            subjects:[{id:100,title:'chinese'},{id:200,title:'maths'}],
            buttons:['11' , '12' , '13'],
            componentName:"1",
            unit:"px"
        },
        components:{
            'isCom1':isCom1,
            'isCom2':isCom2,
            'isCom3':isCom3,
            'buttons_div':buttons_div,
            'pCom':pCom
        },
        methods:{
            enlarge : function(){
                this.fss += 1;
            },
            enlM : function(a){
                this.fss += a;
            },
            handleChangeBn:function(a){
                this.componentName = a;
            }
        },
        computed:{
            calComponentName:function(){
                return 'isCom' + this.componentName;
            }
        }

    });

</script>
</html>
